{% extends "pages-base.html" %}
{% load hostLocation %}
{% block css %}
<link href="/static/plugins/fooTable/css/footable.core.css" rel="stylesheet">
<!--JAVASCRIPT-->
<!--=================================================-->
<!--Pace - Page Load Progress Par [OPTIONAL]-->
<!--<link href="/static/plugins/pace/pace.min.css" rel="stylesheet">
<script src="/static/plugins/pace/pace.min.js"></script>-->
<!--jQuery [ REQUIRED ]-->
<!--<script src="/static/js/jquery-2.2.4.min.js"></script>-->
<!--BootstrapJS [ RECOMMENDED ]-->
<!--<script src="/static/js/bootstrap.min.js"></script>-->
<!--NiftyJS [ RECOMMENDED ]-->
<!--<script src="/static/js/nifty.min.js"></script>-->
<!--=================================================-->
<!--Demo script [ DEMONSTRATION ]-->
<!--<script src="/static/js/demo/nifty-demo.min.js"></script>-->
<!--FooTable [ OPTIONAL ]-->
<script src="/static/plugins/fooTable/dist/footable.all.min.js"></script>
<!--FooTable Example [ SAMPLE ]-->
<script src="/static/js/demo/tables-footable.js"></script>
{% endblock %}

{% block content %}
<div class="panel">
<!--Default Tabs (Left Aligned)-->
<!--===================================================-->
<div class="tab-base">

    <!--Nav Tabs-->
    <ul class="nav nav-tabs">
        <li class="active">
            <a data-toggle="tab" href="#cmdb-host-manager-tab-1">主机管理</a>
        </li>
        <li>
            <a data-toggle="tab" href="#cmdb-host-manager-tab-2">账户管理</a>
        </li>
    </ul>

    <!--Tabs Content-->
    <div class="tab-content">
        <div id="cmdb-host-manager-tab-1" class="tab-pane fade active in">

            <div id="demo-panel-ref" class="panel">
                <div class="panel-body" id="cmdb-host-addhost-btn">
                    <button data-toggle="modal" class="btn btn-primary btn-lg">
                        添加主机
                    </button>
                </div>
                <!-- Foo Table - Expand / Collapse All Rows -->
                <!--===================================================-->
                <div class="panel-body">
                    <div class="pad-btm">
                        <button id="demo-foo-collapse" class="btn btn-info">合并</button>
                        <button id="demo-foo-expand" class="btn btn-warning">展开</button>
                    </div>
                    <table id="demo-foo-col-exp" class="table toggle-circle">
                        <thead>
                        <tr>
                            <th id="cmdb-hosts-selectall"><input type="checkbox"></th>
                            <th data-toggle="true">主机名</th>
                            <th>公网IP</th>
                            <th>端口</th>
                            <th>主机组</th>
                            <th>用户</th>
                            <th>机房</th>
                            <th>操作</th>
                            <th data-hide="all">内网IP</th>
                            <th data-hide="all">CPU</th>
                            <th data-hide="all">内存</th>
                            <th data-hide="all">硬盘</th>
                            <th data-hide="all">服务列表</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for host in hostlists %}
                        <tr hostid="{{ host.id }}">
                            <td><input type="checkbox"></td>
                            <td target="cmdb-hosts-hostname">{{ host.hostName }}</td>
                            <td target="cmdb-hosts-hostpublicip">{{ host.hostPublicIP }}</td>
                            <td target="cmdb-hosts-hostport">{{ host.hostSSHPort }}</td>
                            <td target="cmdb-hosts-hostgroup" groupid="{{ host.hostgroup.id }}">
                                {{ host.hostgroup.hostGroupName }}
                            </td>
                            <td target="cmdb-hosts-hostuser" userid="{{ host.manageruser.id }}">
                                {{ host.manageruser.managerName }}
                            </td>
                            <td target="cmdb-hosts-location">{{ host.hostLocation|hostlotion }}</td>
                            <td>
                                <button type="button" class="btn btn-info cmdb-hosts-edit" data-toggle="modal">编辑
                                </button>
                                <button type="button" class="btn btn-danger cmdb-hosts-del">删除</button>
                            </td>
                            <td>{{ host.hostdetail.hostPrivateIP }}</td>
                            <td>{{ host.hostdetail.hostCPU }}</td>
                            <td>{{ host.hostdetail.hostMem }}</td>
                            <td>{{ host.hostdetail.hostDisk }}</td>
                            <td target="cmdb-hosts-services">{{ host.hostSeviceList }}</td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <div class="pad-btm">
                        <!--用于获取主机的CPU，mem，disk，内网ip等信息-->
                        <button id="cmdb-hosts-updatehost" class="btn btn-info">更新</button>
                    </div>
                </div>
                <!--===================================================-->
                <!-- End Foo Table - Expand / Collapse All Rows -->


            </div>

            <!--Default Bootstrap Modal-->
            <!--===================================================-->
            <div class="modal fade" id="cmdb-addhosts-modal" role="dialog" tabindex="-1"
                 aria-labelledby="demo-default-modal"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">

                        <!--Modal header-->
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><i
                                    class="pci-cross pci-circle"></i></button>
                            <h4 class="modal-title">添加主机</h4>
                        </div>

                        <!--Modal body-->
                        <div class="modal-body">
                            <!-- BASIC FORM ELEMENTS -->
                            <!--===================================================-->
                            <form class="panel-body form-horizontal form-padding">
                                <!--Text Input-->
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="cmdb-hosts-hostname">主机名</label>
                                    <div class="col-md-9">
                                        <input type="text" id="cmdb-hosts-hostname" class="form-control"
                                               placeholder="hostname">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="cmdb-hosts-hostpublicip">IP地址</label>
                                    <div class="col-md-9">
                                        <input type="text" id="cmdb-hosts-hostpublicip" class="form-control"
                                               placeholder="ip">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="cmdb-hosts-hostport">SSH端口</label>
                                    <div class="col-md-9">
                                        <input type="text" id="cmdb-hosts-hostport" class="form-control"
                                               placeholder="22">
                                    </div>
                                </div>
                                <!--Textarea-->
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="cmdb-hosts-services">服务列表</label>
                                    <div class="col-md-9">
                            <textarea id="cmdb-hosts-services" rows="9" class="form-control"
                                      placeholder="Your services here.."></textarea>
                                    </div>
                                </div>

                                <!--select host group-->
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="cmdb-hosts-hostgroup">主机组</label>
                                    <div class="col-md-9">
                                        <select data-placeholder="Choose a Country..." id="cmdb-hosts-hostgroup"
                                                class="form-control">
                                            {% for group in allHostGroups %}
                                            <option value="{{ group.id }}">{{ group.hostGroupName }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <!--select host user-->
                                <div class="form-group">
                                    <label class="col-md-3 control-label" for="cmdb-hosts-hostmanager">选择用户</label>
                                    <div class="col-md-9">
                                        <select data-placeholder="Choose a Country..." id="cmdb-hosts-hostmanager"
                                                class="form-control">
                                            {% for hostuser in managers %}
                                            <option value="{{ hostuser.id }}">{{ hostuser.managerName }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group pad-ver">
                                    <label class="col-md-3 control-label">所在机房</label>
                                    <div class="col-md-9" id="cmdb-hosts-location">
                                        <!-- Radio Buttons -->
                                        <div class="radio">
                                            <input id="cmdb-hosts-location-azure" class="magic-radio" type="radio"
                                                   name="cmdb-hosts-location"
                                                   checked value="0">
                                            <label for="cmdb-hosts-location-azure">azure</label>
                                        </div>
                                        <div class="radio">
                                            <input id="cmdb-hosts-location-aliyun" class="magic-radio" type="radio"
                                                   name="cmdb-hosts-location" value="1">
                                            <label for="cmdb-hosts-location-aliyun">aliyun</label>
                                        </div>
                                    </div>
                                </div>

                            </form>
                            <!--===================================================-->
                            <!-- END BASIC FORM ELEMENTS -->
                        </div>
                        <!--Modal footer-->
                        <div class="modal-footer" id="cmdb-hosts-savebtn">
                            <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                            <button class="btn btn-primary btn-save">保存</button>
                        </div>
                    </div>
                </div>
            </div>

            <!--===================================================-->
            <!--End Default Bootstrap Modal-->

        </div>
        <div id="cmdb-host-manager-tab-2" class="tab-pane fade">
            <p>添加服务器的管理账户</p>
            <div class="panel">
                <div class="panel-body" id="cmdb-host-addhost-Manger-btn">
                    <button data-toggle="modal" class="btn btn-primary btn-lg" data-target="#cmdb-host-addhostManger-modal">
                        添加账户
                    </button>
                </div>
                <!--Bordered Table-->
                <!--===================================================-->
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th>User</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody id="cmdb-hosts-delmanageruser">
                            {% for manager in managers %}
                            <tr managerid="{{ manager.id }}">
                                <td>{{ manager.managerName }}</td>
                                <td class="cmdb-hosts-deluser-btn">删除</td>
                            </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                <!--===================================================-->
                <!--End Bordered Table-->


            </div>
        </div>

        <!--add host manager Modal-->
        <!--===================================================-->
        <div class="modal fade" id="cmdb-host-addhostManger-modal" role="dialog" tabindex="-1"
             aria-labelledby="cmdb-host-addhostManger-ModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">

                    <!--Modal header-->
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><i
                                class="pci-cross pci-circle"></i></button>
                        <h4 class="modal-title">添加账户</h4>
                    </div>

                    <!--Modal body-->
                    <div class="modal-body">
                        <!-- BASIC FORM ELEMENTS -->
                        <!--===================================================-->
                        <form class="panel-body form-horizontal form-padding">
                            <!--Text Input-->
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="cmdb-hosts-manager-name">用户名</label>
                                <div class="col-md-9">
                                    <input type="text" id="cmdb-hosts-manager-name" class="form-control"
                                           placeholder="username">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label" for="cmdb-hosts-manager-pwd">密码</label>
                                <div class="col-md-9">
                                    <input type="password" id="cmdb-hosts-manager-pwd" class="form-control"
                                           placeholder="pwd">
                                </div>
                            </div>
                        </form>
                        <!--===================================================-->
                        <!-- END BASIC FORM ELEMENTS -->
                    </div>
                    <!--Modal footer-->
                    <div class="modal-footer" id="cmdb-hosts-addmanager-savebtn">
                        <button data-dismiss="modal" class="btn btn-default" type="button">关闭</button>
                        <button class="btn btn-primary btn-save">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <!--===================================================-->
        <!--add host manager Modal--->


    </div>
</div>

<!--===================================================-->
<!--End Default Tabs (Left Aligned)-->

</div>
{% endblock %}


{% block js %}
<script src="/static/js/cmdb-hosts.js"></script>
{% endblock %}